<template>
      <div class="app-container">
        <h2 style="text-align: center;">发布新课程</h2>
        <el-steps :active="2" process-status="wait" align-center style="margin-bottom: 40px;">
          <el-step title="填写课程基本信息"/>
          <el-step title="创建课程大纲"/>
          <el-step title="最终发布"/>
        </el-steps>
        <el-button type="text" @click="dialogChapterFormVisible=true">添加章节</el-button>
<!-- 章节 -->
<ul class="chanpterList">
    <li
        v-for="chapter in chapterNestedList"
        :key="chapter.id">
        <p>
            {{ chapter.title }}
            <span class="acts">
              <el-button style="" type="text" @click="openVideo(chapter.id)">添加小节</el-button>
                <el-button style="" type="text" @click="openEditChatper(chapter.id)">编辑</el-button>
                <el-button type="text" @click="removeChapter(chapter.id)">删除</el-button>
            </span>
        </p>
        <!-- 视频 -->
        <ul class="chanpterList videoList">
            <li
                v-for="video in chapter.children"
                :key="video.id">
                <p>{{ video.title }}
                  <span class="acts">
                    <el-button style="" type="text">编辑</el-button>
                    <el-button type="text" @click="removeVideo(video.id)">删除</el-button>
            </span>
                </p>
            </li>
        </ul>
    </li>
</ul>
<div>
    <el-button @click="previous">上一步</el-button>
    <el-button :disabled="saveBtnDisabled" type="primary" @click="next">下一步</el-button>
<!-- 添加和修改章节表单 -->
<el-dialog :visible.sync="dialogChapterFormVisible" title="添加章节">
    <el-form :model="chapter" label-width="120px">
        <el-form-item label="章节标题">
            <el-input v-model="chapter.title"/>
        </el-form-item>
        <el-form-item label="章节排序">
            <el-input-number v-model="chapter.sort" :min="0" controls-position="right"/>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogChapterFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
    </div>
</el-dialog>
<!-- 添加和修改章节表单 -->
<el-dialog :visible.sync="dialogChapterFormVisible" title="添加章节">
    <el-form :model="chapter" label-width="120px">
        <el-form-item label="章节标题">
            <el-input v-model="chapter.title"/>
        </el-form-item>
        <el-form-item label="章节排序">
            <el-input-number v-model="chapter.sort" :min="0" controls-position="right"/>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogChapterFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
    </div>
</el-dialog>
  </div>
</div>
    </template>

<script>
import chapter from '@/api/edu/chapter'
import video from '@/api/edu/video'
export default {
  data() {
    return {
      saveBtnDisabled: false,
      courseId:'', // 保存按钮是否禁用
      chapterVideoList:[],
      chapter:{
        title:'',
        sort:0
      },
      video:{
        title:'',
        sort:0,
        videoSourceId:''
      },
      dialogChapterFormVisible:false,
      dialogVideoFormVisible:false
    }
  },
  created() {
    if(this.$route.params && this.$route.params.id){
      this.courseId = this.$route.params.id
      this.getChapterVideo()
    }
  },
  methods: {
    removeVideo(id){
      this.$confirm('此操作将永久删除小节, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {  //点击确定，执行then方法
        //调用删除的方法
        video.deletevideo(id)
          .then(response => {//删除成功
            //提示信息
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            //回到列表页面
            this.getChapterVideo()
          })
      }) 
    },
openVideo(chapterId){
    this.dialogVideoFormVisible = true
    this.video.chapterId = chapterId
  },
  addVideo(){
    this.video.courseId = this.courseId
    video.addVideo(this.video)
    .then(response =>{
      this.dialogChapterFormVisible = false
      this.$message({
              type: 'success',
              message: '添加小节成功!'
            });
            //回到列表页面
            this.getChapterVideo()
    })
  },
  saveOrUpdateVideo(){
    this.addVideo()
  },
    removeChapter(chapterId){
      this.$confirm('此操作将永久删除章节记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {  //点击确定，执行then方法
        //调用删除的方法
        chapter.deleteChapterId(id)
          .then(response => {//删除成功
            //提示信息
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            //回到列表页面
            this.getChapterVideo()
          })
      }) 
    },
    openEditChatper(chapterId){
      this.dialogChapterFormVisible = true
      chapter.getChapter(chapterId)
      .then(response =>{
        this.chapter = response.data.chapter
      })
    },
    openChapterDialog(){
      this.dialogChapterFormVisible = true
      this.chapter.title = ''
      this.chapter.sort = 0
    },
    addChapter(){
      this.chapter.courseId = this.courseId
      chapter.addChapter(this.chapter)
      .then(response =>{
        this.dialogChapterFormVisible = false
        this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getChapterVideo()
      })
    },
    updateChapter(){
      chapter.updateChapter(this.chapter)
      .then(response =>{
        this.dialogChapterFormVisible = false
        this.$message({
              type: 'success',
              message: '修改章节成功!'
            });
            this.getChapterVideo()
      })
    },
    saveOrUpdate(){
      if(!this.chapter.id){
        this.addChapter()
      }else{
        this.updateChapter()
      }
    },
    getChapterVideo(){
      chapter.getChapterVideo(this.courseId)
      .then(response =>{
        this.chapterVideoList = response.data.allChapterVideo
      })
    },
    previous() {
      this.$router.push({ path: '/course/info/'+this.courseId })
    },
    next() {
      this.$router.push({ path: '/course/publish/'+this.courseId })
    }
  }
}
</script> 